<template>
        <el-menu
                :collapse="isCollapseComputed"
                default-active="1-4-1"
                class="el-menu-vertical-demo"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
        >
            <div class="adminProjectName">{{ projectNameStateComputed }}</div>
            <el-submenu :index="v.name" v-for="v in adminMenuList" :key="v.id">
                <template slot="title">
                  <!--  <i :class="'el-icon-' + v.icon "></i>-->
                    <i class="el-icon-video-play"></i>
                    <span>{{ v.name }}</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item :index="v2.path" v-for="v2 in v.children" :key="v2.id" @click="clickMenu(v2)">{{ v2.name }}</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
</template>

<script>

    export default {
        computed: {
            isCollapseComputed() {
                return this.$store.state.aside.isCollapseState;
            },
            projectNameStateComputed() {
                return this.$store.state.aside.projectNameState;
            },
            clickMenuStateComputed() {
                return this.$store.state.aside.clickMenuState;
            }
        },
        data() {
            return {
                adminMenuList: []
            }
        },
        created(){
            this.menuListMethods();
        },
        methods: {
            menuListMethods() {
                this.$http.post('ruleAdminAll', this.loginForm).then(
                    response => {
                        console.log(response);
                        this.adminMenuList = this.$localStorage.get('menuList', true);
                    }
                );
            },
            clickMenu(param) {
                let path = param.path.split('/').slice(-1),
                    adminClickMenu = this.clickMenuStateComputed;
                if (path == adminClickMenu){
                    // 调用reload方法，刷新整个页面
                    this.reload();
                } else {
                    this.$router.push({ name: path });
                }
            }
        },
        inject: ['reload']
    }
</script>

<style scoped lang="scss">
    .el-menu{
        height: 100%;
        border-right: none;
    }
    .adminProjectName {
        border-bottom-color: transparent;
        color: rgb(255, 255, 255);
        background-color: rgb(84, 92, 100);
        height: 60px;
        line-height: 60px;
        text-align: center;
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }
</style>